<template>
	<view class="testitem_styles">
		<view class="testitem_lefticon">
		</view>
		<view class="testitem_main">
			<view class="testitem_title">
				{{subjects[index].content}}
			</view>
			
			<ol class="testitem_ul" type="A">
				<li @click="clickItem(item)"  :class="item.optionId == liItemOptionId ? 'active' : ''" v-for="(item, idx) in subjects[index].options"><text>{{indexArr[idx]}}. </text>{{item.content}}</li>
			</ol>
			
			<view class="testitem_footer">
				<view  class="testitem_button" v-if="index !== 0"@click="lastSkip" >上一题</view>
				<view class="testitem_button_solt" v-if="index === 0"/>
				<view @click="nextSkip" :disabled="!liItemOptionId"  :class=" liItemOptionId? 'testitem_button' : 'testitem_button_disable'">{{index+1 === subjects.length ?"结束答题": "下一题"}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subjects: [],
				indexArr: ['A', "B", "C", "D", "E"],
				index: 0, 
				liItemOptionId: '',
				answerArr: [],
				selectItem: {},
			}
		},
		methods: {
			clickItem: function(item) {
				let copyArr = [...this.answerArr];
				copyArr.push({...item, idx: this.index});
				this.answerArr = copyArr;
				this.selectItem = item;
				this.liItemOptionId = this.liItemOptionId == item.optionId ? '' : item.optionId;
			},
			nextSkip: function() {
				if(!this.liItemOptionId ) return;
				if(this.index+ 1 !== this.subjects.length) {
					this.liItemOptionId = ''
				}
				if (this.index+1 === this.subjects.length) {
					this.submitTest()
				}else {
					this.index += 1;
				}
			},
			lastSkip: function() {
				if(this.index === 0) return
				let arr = [...this.answerArr]
				this.answerArr = arr.filter(item => item.idx !== this.index)
				this.index -= 1;
				this.liItemOptionId = this.answerArr[this.index]?.optionId
			},
			submitTest: function() {
				uni.redirectTo({
					url: "../ResultPage/ResultPage",
					fail(err) {
						console.log(err)
					}
				})
				const arr = this.answerArr.map(item => {
					return {
						...item,
						usrId: uni.getStorageSync("userInfo").id,
						testId: this.subjects[0].testId
					}
				})
				this.$api.saveTest(arr).then(
					(res) => {
						if(res?.code === '200') {
							console.log(res, 'res')
						}
					}
				)
			}
		},
		onLoad(data) {
			this.subjects = JSON.parse(data.options)
		}
	}
</script>

<style>
	.testitem_styles {
		background-color: #FAF2DC;
		width: 100%;
		background-image: url('../../static/Test/testitem_back.png');
		background-size: 100% 100%;
		background-position: center center;
		position: relative;
	}
	.testitem_lefticon {
		z-index: 100;
		position: absolute;
		top: 0;
		left: 0;
		width: 20%;
		height: 20%;
		background-image: url('../../static/Test/testitem_left.png');
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.testitem_main {
		width: 80%;
		height: 75%;
		overflow: auto;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -40%);
		padding: 30rpx 50rpx;
		box-sizing: border-box;
	}
	.testitem_title {
		width: 80%;
		position: absolute;
		font-size: 16px;
	}
	.testitem_ul {
		width: 80%;
		position: absolute;
		margin-top: 100rpx;
	}
	.testitem_ul > li {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin-bottom: 30rpx;
		background-color: #F1F1F1;
		box-sizing: border-box;
		padding: 0 30rpx;
		border-radius: 50rpx 50rpx;
	}
	.testitem_ul > li > text {
		margin-right: 20rpx;
	}
	.active {
		background: linear-gradient(90deg, #F99333 0%, #F15F35 100%);
		color: #FFFFFF;
	}
	.testitem_footer {
		width: 80%;
		height: 100rpx;
		display: flex;
		bottom: 0;
		position: absolute;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.testitem_footer > .testitem_button {
		background-color: #F99333;
		width: 45%;
		border-radius: 50rpx 50rpx;
		color: #FFFFFF;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 50rpx;
		text-align: center;
		margin-right: 10rpx;
	}
	.testitem_button_disable {
		background-color: #FFEAD5;
		width: 45%;
		border-radius: 50rpx 50rpx;
		color: #FFFFFF;
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 50rpx;
		text-align: center;
		margin-right: 10rpx;
	}
	.testitem_button_solt {
		width: 45%;
		height: 100rpx;
		margin-right: 10rpx;
		padding: 0 50rpx;
	}
</style>
